<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<title>Insert title here</title>
	</head>
	<script src="../jss/global.js" type="text/javascript" charset="utf-8"></script>

	<body>
		<!-- 模糊查询表单 -->
		<div class="layui-form-item" style="margin-top: 20px;" onsubmit="return false;">
			<form class="layui-form">
				<label class="layui-form-label">角色名:</label>
				<div class="layui-input-inline" style="width:120px;">
					<input type="text" id="sroleName" name="roleName" autocomplete="off" class="layui-input" placeholder="请输入角色名">
				</div>
			</form>
			<button class="layui-btn" id="search" data-type="seach">搜索</button>
		</div>

		<!--顶部工具栏-->
		<script type="text/html" id="topToolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="createRole">创建角色</button>
			</div>
		</script>
		<!-- 表格 -->
		<table id="demo" lay-filter="test"></table>

		<!-- 行内工具栏 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setMod">设置权限</a>
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<!-- 添加页面开始 -->
		<form class="layui-form" onsubmit="return false;" id="addForm" style="display: none;">

			<div class="layui-form-item">
				<label class="layui-form-label">角色名称：</label> <input type="text" name="roleName" style="width: 130px" lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">备注：</label> <input type="text" name="roleRemake" style="width: 130px" placeholder="请输入备注(非必填)" autocomplete="off" class="layui-input">
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="addS">添加</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<!-- 添加页面结束 -->

		<!-- 修改页面开始 -->
		<form class="layui-form" onsubmit="return false;" id="upForm" style="display: none;">

			<div class="layui-form-item" style="display: none;">
				<label class="layui-form-label">ID：</label> <input type="text" name="roleId" id="roleId" style="width: 130px" class="layui-input">
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">角色名称：</label> <input type="text" name="roleName" id="roleName" style="width: 130px" lay-verify="required" class="layui-input">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注：</label> <input type="text" name="roleRemake" id="roleRemake" style="width: 130px" class="layui-input">
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="upS">修改</button>
				</div>
			</div>
		</form>
		<!-- 修改页面结束 -->

		<!--设置权限-->
		<div id="setModule" style="display: none;" title="设置权限" style="width:300px;height:600px; margin: 10px auto;">
			<table id="tabEdit">
				<tr>
					<td>
						<div id="roleTree"></div>
					</td>
				</tr>
				<tr>
					<td style="text-align: center; padding: 10px;">
						<a id="setRoleModule" class="layui-btn"><i class="layui-icon">&#xe605;</i>保存设置</a>
					</td>
				</tr>
			</table>

		</div>

	</body>
	<script>
		var addIndex;
		layui.use(['layer', 'form', 'table', 'tree', 'element'], function() {
			var element = layui.element;
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;
			var tree = layui.tree;
			var $ = layui.$;
			//渲染表格
			table.render({
				elem: '#demo', //指定哪个容器
				toolbar: '#topToolbar',
				url: globalData.server + "role/select",
				where: {
					token: globalData.getToken
				},
				page: true, //是否开启分页
				method: 'post', //提交方式
				cols: [
					[{
						type: 'checkbox'
					}, {
						field: 'roleId',
						title: 'j角色编号',
						width: 100
					}, {
						field: 'roleName',
						title: '角色名称',
						width: 200
					}, {
						field: 'roleRemake',
						title: '备注',
						width: 200
					}, {
						title: '操作',
						width: 200,
						toolbar: '#barDemo'
					}]
				],
				id: 'testTable'
			});

			//点击搜索按钮，调用方法
			$('#search').click(function() {
				table.reload('testTable', {
					where: {
						//模糊查询的条件
						'roleName': $('#sroleName').val(),
					}
				});
			});

			//点击添加按钮弹出页面
			table.on('toolbar(test)', function(obj) {
				switch(obj.event) {
					case 'createRole':
						{
							addIndex = layer.open({
								type: 1,
								content: $('#addForm'),
								area: ['600px', '500px'],
								title: "您正在添加角色"
							});
						}
						break;
				};
			});

			//监听表单提交--添加
			form.on('submit(addS)', function(data) {
				//设置要提交的数据
				var data = $("#addForm").serialize() + "&token=" + globalData.getToken();
				//提交  ajax
				$.post(
					//地址
					globalData.server + 'role/create', //添加学生的方法
					data,
					function(res) {
						if(res.code == 0) {
							layer.msg(res.msg, {
								icon: 1
							}, function() {
								layer.close(addIndex); //关闭添加窗口
								window.location.reload(); //刷新页面
							});
						} else if(res.code == 2) {
							layer.msg(res.msg, {
								icon: 4
							});
						} else {
							layer.msg(res.msg, {
								icon: 4
							}, function() {
								layer.close(addIndex); //关闭添加窗口
								window.location.reload(); //刷新页面
							});
						}
					}, 'json');
			});

			//监听工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据    data.列名
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if(layEvent === 'del') { //删除
					layer.confirm('真的删除该角色么', function(index) {
						/* obj.del(); */
						//删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						$.post(
							//地址
							globalData.server + 'role/delete', //删除
							{
								token: globalData.getToken(),
								'rid': data.roleId

							},

							function(res) {
								if(res.code == 0) {
									layer.msg('删除成功', {
										icon: 1
									}, function() {
										layer.close(addIndex); //关闭修改窗口
										window.location.reload(); //刷新页面
									});
								} else {
									layer.msg('删除失败', {
										icon: 4
									}, function() {
										layer.close(addIndex); //关闭修改窗口
										window.location.reload(); //刷新页面
									});
								}
							}, 'json');

					});
				} else if(layEvent === 'edit') { //编辑
					//do something
					//弹出一个修改的页面
					//数据回显
					$('#roleId').val(data.roleId);
					$('#roleName').val(data.roleName);
					$('#roleRemake').val(data.roleRemake);

					layer.open({
						type: 1,
						content: $('#upForm'),
						area: ['600px', '500px'],
						title: "你正在修改[" + data.roleName + "]的信息"
					});

					//同步更新缓存对应的值
					obj.update({
						username: '123',
						title: '正在更新'
					});
				} else if(layEvent === 'setMod') { //设置模块

					//打开设置权限窗口
					setIndex = layer.open({
						type: 1,
						content: $('#setModule'),
						title: "正在设置角色[" + data.roleName + "]的权限模块",
						area: ['300px', '400px']
					});

					arr = [];
					$.post(globalData.server + "role/getModByRidTrue", {
						token: globalData.getToken,
						rid: data.roleId
					}, function(r) {
						tree.render({
							elem: '#roleTree',
							data: r,
							id: 'roleTreeId',
							showCheckbox: true
						})
						rid = data.roleId;
					}, "json");
				}

			});

			//监听表单提交--修改
			form.on('submit(upS)', function(data) {
				//整个表单的数据以序列化的形式提交
				var data = $("#upForm").serialize() + "&token=" + globalData.getToken();
				//提交  ajax
				$.post(
					//地址
					globalData.server + 'role/update', //修改的方法
					data,
					function(res) {
						if(res.code == 0) {
							layer.msg(res.msg, {
								icon: 1
							}, function() {
								layer.close(addIndex); //关闭添加窗口
								window.location.reload(); //刷新页面
							});
						} else if(res.code == 2) {
							layer.msg(res.msg, {
								icon: 4
							});
						} else {
							layer.msg(res.msg, {
								icon: 4
							}, function() {
								layer.close(addIndex); //关闭添加窗口
								window.location.reload(); //刷新页面
							});
						}
					}, 'json');
			});

			//给角色设置权限
			$("#setRoleModule").click(function() {
				var checkData = tree.getChecked('roleTreeId');
				//根据递归，获取选中的ids
				var ids = getModelIds(checkData);
				//去除最后一个,
				ids = ids.slice(0, ids.length - 1);
				$.post(globalData.server + "role/setRoleModule", {
					ids: ids,
					rid: rid,
					token: globalData.getToken
				}, function(res) {
					layer.msg(res.msg, {
						icon: 1,
						time: 2000
					}, function() {
						window.location.reload();
					});
				}, 'json');
			});

			var str = '';

			function getModelIds(arr) {
				//console.log((arr[0].children)[1].children);
				for(var i = 0; i < arr.length; i++) {
					str += arr[i].id + ',';
					if(arr[i].children != undefined) {
						getModelIds(arr[i].children);
					}
				}
				return str;
			}

		});
	</script>

</html>